s<template>
  <main>
    <div class="left">
      <UserInfo :userInfo="userInfo" v-if="userInfo" />
      <Calendar />

      <Collection v-if="userInfo.userId" v-model="userInfo" />
      <Hot class="hot" :list="hotArticleList" :more="true">
        <template #title>
          <h3>阅读排行榜</h3>
        </template>
      </Hot>
    </div>
    <div class="right">
      <ul class="nav">
        <router-link
          :to="$route.path.startsWith('/otherHome') ? `/otherHome/passages/${$route.params.id}` : '/myhome/passages'"
          active-class="active" exact>文章</router-link>
        <router-link :to="$route.path.startsWith('/otherHome') ? `/otherHome/messageboard/${$route.params.id}`
          : '/myhome/messageboard'" active-class="active" exact>留言板</router-link>
      </ul>
      <router-view></router-view>
    </div>
  </main>
</template>

<script setup>
import UserInfo from './UserInfo.vue'
import Calendar from './Calendar.vue'
import Collection from './Collection.vue'
import Hot from '@/components/Hot.vue';
import userStore from '@/stores/modules/user';
import { onMounted, ref, watch } from 'vue';
import { reqGetUserInfo } from '@/apis/user';
import { reqGetUserHotArticleList } from '@/apis/passage';
import { useRoute, useRouter } from 'vue-router';
let userInfo = ref({});
let hotArticleList = ref([]);
let searchKey = ref([''])
onMounted(() => {
  const route = useRoute()
  if (route.path.startsWith('/otherHome')) {
    getUserInfo(route.params.id)
    getHotArticle({ userId: route.params.id, num: 5 })
  } else {
    getUserInfo(userStore().userId)
    getHotArticle({ userId: userStore()['userId'], num: 5 })
  }
})
const getUserInfo = async (params) => {
  let res = await reqGetUserInfo(params)
  if (res.code === 200) {
    userInfo.value = res.data
  }
}

const getHotArticle = async (params) => {
  let res = await reqGetUserHotArticleList(params)
  if (res.code === 200) {
    hotArticleList.value = res.data
  }
}
const route = useRoute()
watch(() => route.path, (newPath) => {
  if (newPath.startsWith('/otherHome')) {
    getUserInfo(route.params.id)
    getHotArticle({ userId: route.params.id, num: 5 })
  } else {
    getUserInfo(userStore().userId)
    getHotArticle({ userId: userStore()['userId'], num: 5 })
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
main {
  margin: 0 auto;
  margin-top: .16rem;
  width: 90%;
  padding: 0 .8333rem;
  display: flex;
  background-color: #d9ebf5;

  .left {
    padding: .3333rem;
    width: 30%;
    margin: .3333rem 0;

    .search {
      margin-top: .3333rem;
      height: .8333rem;
      width: 100%;
      background-color: rgba($color: #ccc, $alpha: 0.3);
      transition: all .3s;
      border-radius: .1667rem;
      display: flex;
      align-items: center;
      padding: 0 .3333rem;
      gap: .1667rem;
      font-size: .3rem;

      &:hover {
        background-color: rgba($color: #ccc, $alpha: 0.5);
      }

      input {
        background-color: transparent;
        border: none;
        outline: none;
      }
    }

    .hot {
      margin-top: .6667rem;
    }

  }

  .right {
    padding: .5rem .3333rem 0;
    width: 70%;

    .nav {
      width: 30%;
      display: flex;
      justify-content: space-evenly;
      font-size: .3333rem;
      margin-bottom: .25rem;

      a {
        border-bottom: .0333rem solid transparent;
        padding-bottom: .05rem;
      }

      a:hover {
        border-bottom: .0333rem solid #666;
      }
    }

    .active {
      color: #654321;
      font-weight: bold;
    }
  }
}
</style>